<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单处理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="home-b2c.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">订单管理</h1>
                <button onclick="showFilterModal()" class="text-white hover:opacity-80 relative">
                    <i class="fas fa-filter text-lg"></i>
                    <span id="filter-indicator" class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full hidden"></span>
                </button>
            </div>
        </div>

        <!-- Tab Navigation -->
        <div class="px-4 py-2 bg-white border-b border-gray-200">
            <div class="flex space-x-4 overflow-x-auto">
                <button onclick="switchTab('all')" id="tab-all" class="pb-2 text-gray-500 text-sm whitespace-nowrap tab-btn">
                    全部
                </button>
                <button onclick="switchTab('pending')" id="tab-pending" class="pb-2 border-b-2 border-orange-500 text-orange-500 font-medium text-sm whitespace-nowrap tab-btn">
                    待发货(12)
                </button>
                <button onclick="switchTab('unpaid')" id="tab-unpaid" class="pb-2 text-gray-500 text-sm whitespace-nowrap tab-btn">
                    待付款(5)
                </button>
                <button onclick="switchTab('shipped')" id="tab-shipped" class="pb-2 text-gray-500 text-sm whitespace-nowrap tab-btn">
                    已发货(8)
                </button>
                <button onclick="switchTab('service')" id="tab-service" class="pb-2 text-gray-500 text-sm whitespace-nowrap tab-btn">
                    售后中(3)
                </button>
            </div>
        </div>

        <!-- Order List -->
        <div class="h-[calc(852px-160px)] overflow-y-auto pb-24">
            <!-- All Orders Tab -->
            <div id="orders-all" class="order-tab">
                <!-- Pending Order 1 -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3 border-b border-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-xs text-gray-500">订单号: 202501050001</span>
                                <span class="ml-2 bg-orange-100 text-orange-600 text-xs px-2 py-0.5 rounded">待发货</span>
                            </div>
                            <span class="text-xs text-gray-400">2025-01-05 10:32</span>
                        </div>
                    </div>
                    <div class="px-4 py-3">
                        <div class="flex items-start mb-3">
                            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="text-sm font-medium mb-1">无线蓝牙耳机 Pro Max</h3>
                                <p class="text-xs text-gray-500">颜色: 黑色 | 数量: 2</p>
                                <p class="text-sm font-bold text-gray-800 mt-1">¥598</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div>
                                <p class="text-xs text-gray-500">买家: 张先生</p>
                                <p class="text-xs text-gray-500">地址: 北京市朝阳区...</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="viewOrderDetail('202501050001')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-200 transition-colors">查看详情</button>
                                <button onclick="shipOrder('202501050001')" class="bg-orange-500 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm hover:bg-orange-600 transition-colors">立即发货</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Unpaid Order -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3 border-b border-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-xs text-gray-500">订单号: 202501050003</span>
                                <span class="ml-2 bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded">待付款</span>
                            </div>
                            <span class="text-xs text-gray-400">2025-01-05 12:20</span>
                        </div>
                    </div>
                    <div class="px-4 py-3">
                        <div class="flex items-start mb-3">
                            <img src="https://images.unsplash.com/photo-1484704849700-f032a568e944?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="text-sm font-medium mb-1">便携充电宝 20000mAh</h3>
                                <p class="text-xs text-gray-500">颜色: 白色 | 数量: 3</p>
                                <p class="text-sm font-bold text-gray-800 mt-1">¥267</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div>
                                <p class="text-xs text-gray-500">买家: 王先生</p>
                                <p class="text-xs text-red-500">剩余支付时间: 23:45:30</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="viewOrderDetail('202501050003')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-200 transition-colors">查看详情</button>
                                <button onclick="remindPayment('202501050003')" class="bg-blue-500 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm hover:bg-blue-600 transition-colors">提醒付款</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Shipped Order -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3 border-b border-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-xs text-gray-500">订单号: 202501050004</span>
                                <span class="ml-2 bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded">已发货</span>
                            </div>
                            <span class="text-xs text-gray-400">2025-01-04 15:30</span>
                        </div>
                    </div>
                    <div class="px-4 py-3">
                        <div class="flex items-start mb-3">
                            <img src="https://images.unsplash.com/photo-1585298723682-7115561c51b7?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="text-sm font-medium mb-1">无线键盘鼠标套装</h3>
                                <p class="text-xs text-gray-500">颜色: 黑色 | 数量: 1</p>
                                <p class="text-sm font-bold text-gray-800 mt-1">¥159</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div>
                                <p class="text-xs text-gray-500">买家: 赵女士</p>
                                <p class="text-xs text-blue-500">快递: 顺丰速运 SF1234567890</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="trackOrder('202501050004')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-200 transition-colors">查看物流</button>
                                <button onclick="confirmDelivery('202501050004')" class="bg-green-500 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm hover:bg-green-600 transition-colors">确认收货</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Service Order -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3 border-b border-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-xs text-gray-500">订单号: 202501040008</span>
                                <span class="ml-2 bg-purple-100 text-purple-600 text-xs px-2 py-0.5 rounded">售后中</span>
                            </div>
                            <span class="text-xs text-gray-400">2025-01-04 09:15</span>
                        </div>
                    </div>
                    <div class="px-4 py-3">
                        <div class="flex items-start mb-3">
                            <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="text-sm font-medium mb-1">蓝牙音箱运动版</h3>
                                <p class="text-xs text-gray-500">颜色: 蓝色 | 数量: 1</p>
                                <p class="text-sm font-bold text-gray-800 mt-1">¥299</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div>
                                <p class="text-xs text-gray-500">买家: 刘先生</p>
                                <p class="text-xs text-purple-500">申请原因: 商品质量问题</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="viewOrderDetail('202501040008')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-200 transition-colors">查看详情</button>
                                <button onclick="handleService('202501040008')" class="bg-purple-500 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm hover:bg-purple-600 transition-colors">处理售后</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pending Orders Tab -->
            <div id="orders-pending" class="order-tab" style="display: none;">
                <!-- Pending Order 1 -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3 border-b border-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-xs text-gray-500">订单号: 202501050001</span>
                                <span class="ml-2 bg-orange-100 text-orange-600 text-xs px-2 py-0.5 rounded">待发货</span>
                            </div>
                            <span class="text-xs text-gray-400">2025-01-05 10:32</span>
                        </div>
                    </div>
                    <div class="px-4 py-3">
                        <div class="flex items-start mb-3">
                            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="text-sm font-medium mb-1">无线蓝牙耳机 Pro Max</h3>
                                <p class="text-xs text-gray-500">颜色: 黑色 | 数量: 2</p>
                                <p class="text-sm font-bold text-gray-800 mt-1">¥598</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div>
                                <p class="text-xs text-gray-500">买家: 张先生</p>
                                <p class="text-xs text-gray-500">地址: 北京市朝阳区...</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="viewOrderDetail('202501050001')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-200 transition-colors">查看详情</button>
                                <button onclick="shipOrder('202501050001')" class="bg-orange-500 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm hover:bg-orange-600 transition-colors">立即发货</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pending Order 2 -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3 border-b border-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-xs text-gray-500">订单号: 202501050002</span>
                                <span class="ml-2 bg-orange-100 text-orange-600 text-xs px-2 py-0.5 rounded">待发货</span>
                            </div>
                            <span class="text-xs text-gray-400">2025-01-05 11:15</span>
                        </div>
                    </div>
                    <div class="px-4 py-3">
                        <div class="flex items-start mb-3">
                            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="text-sm font-medium mb-1">智能手表 Series 6</h3>
                                <p class="text-xs text-gray-500">颜色: 银色 | 数量: 1</p>
                                <p class="text-sm font-bold text-gray-800 mt-1">¥1299</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div>
                                <p class="text-xs text-gray-500">买家: 李女士</p>
                                <p class="text-xs text-gray-500">地址: 上海市浦东新区...</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="viewOrderDetail('202501050002')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-200 transition-colors">查看详情</button>
                                <button onclick="shipOrder('202501050002')" class="bg-orange-500 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm hover:bg-orange-600 transition-colors">立即发货</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Unpaid Orders Tab -->
            <div id="orders-unpaid" class="order-tab" style="display: none;">
                <!-- Unpaid Order 1 -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3 border-b border-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-xs text-gray-500">订单号: 202501050003</span>
                                <span class="ml-2 bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded">待付款</span>
                            </div>
                            <span class="text-xs text-gray-400">2025-01-05 12:20</span>
                        </div>
                    </div>
                    <div class="px-4 py-3">
                        <div class="flex items-start mb-3">
                            <img src="https://images.unsplash.com/photo-1484704849700-f032a568e944?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="text-sm font-medium mb-1">便携充电宝 20000mAh + 数据线套装</h3>
                                <p class="text-xs text-gray-500">颜色: 白色 | 数量: 3</p>
                                <p class="text-sm font-bold text-gray-800 mt-1">¥267</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div>
                                <p class="text-xs text-gray-500">买家: 王先生</p>
                                <p class="text-xs text-red-500">剩余支付时间: 23:45:30</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="viewOrderDetail('202501050003')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-200 transition-colors">查看详情</button>
                                <button onclick="remindPayment('202501050003')" class="bg-blue-500 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm hover:bg-blue-600 transition-colors">提醒付款</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Shipped Orders Tab -->
            <div id="orders-shipped" class="order-tab" style="display: none;">
                <!-- Shipped Order 1 -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3 border-b border-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-xs text-gray-500">订单号: 202501050004</span>
                                <span class="ml-2 bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded">已发货</span>
                            </div>
                            <span class="text-xs text-gray-400">2025-01-04 15:30</span>
                        </div>
                    </div>
                    <div class="px-4 py-3">
                        <div class="flex items-start mb-3">
                            <img src="https://images.unsplash.com/photo-1585298723682-7115561c51b7?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="text-sm font-medium mb-1">无线键盘鼠标套装</h3>
                                <p class="text-xs text-gray-500">颜色: 黑色 | 数量: 1</p>
                                <p class="text-sm font-bold text-gray-800 mt-1">¥159</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div>
                                <p class="text-xs text-gray-500">买家: 赵女士</p>
                                <p class="text-xs text-blue-500">快递: 顺丰速运 SF1234567890</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="trackOrder('202501050004')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-200 transition-colors">查看物流</button>
                                <button onclick="confirmDelivery('202501050004')" class="bg-green-500 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm hover:bg-green-600 transition-colors">确认收货</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Service Orders Tab -->
            <div id="orders-service" class="order-tab" style="display: none;">
                <!-- Service Order 1 -->
                <div class="bg-white border-b border-gray-100">
                    <div class="px-4 py-3 border-b border-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="text-xs text-gray-500">订单号: 202501040008</span>
                                <span class="ml-2 bg-purple-100 text-purple-600 text-xs px-2 py-0.5 rounded">售后中</span>
                            </div>
                            <span class="text-xs text-gray-400">2025-01-04 09:15</span>
                        </div>
                    </div>
                    <div class="px-4 py-3">
                        <div class="flex items-start mb-3">
                            <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <h3 class="text-sm font-medium mb-1">蓝牙音箱运动版</h3>
                                <p class="text-xs text-gray-500">颜色: 蓝色 | 数量: 1</p>
                                <p class="text-sm font-bold text-gray-800 mt-1">¥299</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                            <div>
                                <p class="text-xs text-gray-500">买家: 刘先生</p>
                                <p class="text-xs text-purple-500">申请原因: 商品质量问题</p>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="viewOrderDetail('202501040008')" class="bg-blue-100 text-blue-600 text-xs px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-200 transition-colors">查看详情</button>
                                <button onclick="handleService('202501040008')" class="bg-purple-500 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm hover:bg-purple-600 transition-colors">处理售后</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <!-- Filter Modal -->
    <div id="filterModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-t-3xl w-full max-w-[393px] mx-4 max-h-[80vh] overflow-hidden">
            <!-- Modal Header -->
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold">筛选订单</h3>
                <button onclick="hideFilterModal()" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- Modal Content -->
            <div class="p-4 space-y-6 overflow-y-auto max-h-[calc(80vh-120px)]">
                <!-- Order Status Filter -->
                <div>
                    <h4 class="font-medium mb-3">订单状态</h4>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="status" value="unpaid" class="mr-2">
                            <span class="text-sm">待付款</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="status" value="pending" class="mr-2">
                            <span class="text-sm">待发货</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="status" value="shipped" class="mr-2">
                            <span class="text-sm">已发货</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="status" value="completed" class="mr-2">
                            <span class="text-sm">已完成</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="status" value="cancelled" class="mr-2">
                            <span class="text-sm">已取消</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="status" value="refund" class="mr-2">
                            <span class="text-sm">退款中</span>
                        </label>
                    </div>
                </div>

                <!-- Time Range Filter -->
                <div>
                    <h4 class="font-medium mb-3">时间范围</h4>
                    <div class="grid grid-cols-2 gap-2 mb-3">
                        <button onclick="selectTimeRange('today')" class="time-range-btn p-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-50" data-range="today">今天</button>
                        <button onclick="selectTimeRange('week')" class="time-range-btn p-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-50" data-range="week">最近7天</button>
                        <button onclick="selectTimeRange('month')" class="time-range-btn p-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-50" data-range="month">最近30天</button>
                        <button onclick="selectTimeRange('quarter')" class="time-range-btn p-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-50" data-range="quarter">最近3个月</button>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm text-gray-600 mb-1">开始日期</label>
                            <input type="date" id="startDate" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-600 mb-1">结束日期</label>
                            <input type="date" id="endDate" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        </div>
                    </div>
                </div>

                <!-- Order Amount Filter -->
                <div>
                    <h4 class="font-medium mb-3">订单金额</h4>
                    <div class="grid grid-cols-3 gap-2 mb-3">
                        <button onclick="selectAmountRange('0-100')" class="amount-range-btn p-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-50">≤100元</button>
                        <button onclick="selectAmountRange('100-500')" class="amount-range-btn p-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-50">100-500元</button>
                        <button onclick="selectAmountRange('500+')" class="amount-range-btn p-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-50">≥500元</button>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm text-gray-600 mb-1">最低金额</label>
                            <div class="relative">
                                <span class="absolute left-3 top-2 text-gray-500 text-sm">¥</span>
                                <input type="number" id="minAmount" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="0">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm text-gray-600 mb-1">最高金额</label>
                            <div class="relative">
                                <span class="absolute left-3 top-2 text-gray-500 text-sm">¥</span>
                                <input type="number" id="maxAmount" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="不限">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Customer Type Filter -->
                <div>
                    <h4 class="font-medium mb-3">客户类型</h4>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="customerType" value="new" class="mr-2">
                            <span class="text-sm">新客户</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="customerType" value="returning" class="mr-2">
                            <span class="text-sm">老客户</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="customerType" value="vip" class="mr-2">
                            <span class="text-sm">VIP客户</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="customerType" value="member" class="mr-2">
                            <span class="text-sm">会员客户</span>
                        </label>
                    </div>
                </div>

                <!-- Payment Method Filter -->
                <div>
                    <h4 class="font-medium mb-3">支付方式</h4>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="payment" value="wechat" class="mr-2">
                            <span class="text-sm">微信支付</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="payment" value="alipay" class="mr-2">
                            <span class="text-sm">支付宝</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="payment" value="bankcard" class="mr-2">
                            <span class="text-sm">银行卡</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="payment" value="cod" class="mr-2">
                            <span class="text-sm">货到付款</span>
                        </label>
                    </div>
                </div>

                <!-- Delivery Method Filter -->
                <div>
                    <h4 class="font-medium mb-3">配送方式</h4>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="delivery" value="express" class="mr-2">
                            <span class="text-sm">快递配送</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="delivery" value="selfpick" class="mr-2">
                            <span class="text-sm">自提</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="delivery" value="sameday" class="mr-2">
                            <span class="text-sm">同城配送</span>
                        </label>
                        <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="checkbox" name="delivery" value="scheduled" class="mr-2">
                            <span class="text-sm">预约配送</span>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- Modal Footer -->
            <div class="flex gap-3 p-2 mb-5 border-t border-gray-200">
                <button onclick="resetFilters()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                    重置
                </button>
                <button onclick="applyFilters()" class="flex-1 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
                    应用筛选
                </button>
            </div>
        </div>
    </div>

    <script>
        // Tab switching functionality
        function switchTab(tabName) {
            // Hide all tab contents
            document.querySelectorAll('.order-tab').forEach(tab => {
                tab.style.display = 'none';
            });
            
            // Remove active styles from all tab buttons
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('border-b-2', 'border-orange-500', 'text-orange-500', 'font-medium');
                btn.classList.add('text-gray-500');
            });
            
            // Show selected tab content
            document.getElementById('orders-' + tabName).style.display = 'block';
            
            // Add active styles to selected tab button
            const activeBtn = document.getElementById('tab-' + tabName);
            activeBtn.classList.remove('text-gray-500');
            activeBtn.classList.add('border-b-2', 'border-orange-500', 'text-orange-500', 'font-medium');
        }

        // Order detail viewing
        function viewOrderDetail(orderId) {
            window.location.href = 'order-detail.html?id=' + orderId;
        }

        // Ship order
        function shipOrder(orderId) {
            if (confirm('确认发货订单 ' + orderId + ' 吗？')) {
                alert('订单 ' + orderId + ' 已标记为发货状态\n请填写物流信息');
                // TODO: Update order status and add logistics info
            }
        }

        // Remind payment
        function remindPayment(orderId) {
            if (confirm('向买家发送付款提醒？\n订单号: ' + orderId)) {
                alert('付款提醒已发送\n买家将收到短信和推送通知');
                // TODO: Send payment reminder
            }
        }

        // Confirm delivery
        function confirmDelivery(orderId) {
            if (confirm('确认买家已收货？\n订单号: ' + orderId)) {
                alert('订单 ' + orderId + ' 已确认收货\n交易完成');
                // TODO: Update order status to completed
            }
        }

        // Track order logistics
        function trackOrder(orderId) {
            alert('查看物流信息\n订单号: ' + orderId + '\n将显示详细物流跟踪信息...');
            // TODO: Show logistics tracking page
            // window.location.href = 'logistics-tracking.html?id=' + orderId;
        }

        // Handle after-sales service
        function handleService(orderId) {
            alert('处理售后服务\n订单号: ' + orderId + '\n将跳转到售后处理页面...');
            // TODO: Navigate to service handling page
            // window.location.href = 'service-handle.html?id=' + orderId;
        }

        // Filter Modal Functions
        function showFilterModal() {
            document.getElementById('filterModal').classList.remove('hidden');
            // Show filter indicator
            document.getElementById('filter-indicator').classList.remove('hidden');
        }
        
        function hideFilterModal() {
            document.getElementById('filterModal').classList.add('hidden');
        }
        
        // Time range selection
        function selectTimeRange(range) {
            // Remove active class from all time range buttons
            document.querySelectorAll('.time-range-btn').forEach(btn => {
                btn.classList.remove('bg-indigo-100', 'border-indigo-500', 'text-indigo-600');
                btn.classList.add('border-gray-200', 'hover:bg-gray-50');
            });
            
            // Add active class to selected button
            const selectedBtn = document.querySelector(`[data-range="${range}"]`);
            if (selectedBtn) {
                selectedBtn.classList.remove('border-gray-200', 'hover:bg-gray-50');
                selectedBtn.classList.add('bg-indigo-100', 'border-indigo-500', 'text-indigo-600');
            }
            
            // Set date inputs based on selection
            const today = new Date();
            const endDate = today.toISOString().split('T')[0];
            let startDate;
            
            switch(range) {
                case 'today':
                    startDate = endDate;
                    break;
                case 'week':
                    startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
                    break;
                case 'month':
                    startDate = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
                    break;
                case 'quarter':
                    startDate = new Date(today.getTime() - 90 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
                    break;
            }
            
            document.getElementById('startDate').value = startDate;
            document.getElementById('endDate').value = endDate;
        }
        
        // Amount range selection
        function selectAmountRange(range) {
            // Remove active class from all amount range buttons
            document.querySelectorAll('.amount-range-btn').forEach(btn => {
                btn.classList.remove('bg-indigo-100', 'border-indigo-500', 'text-indigo-600');
                btn.classList.add('border-gray-200', 'hover:bg-gray-50');
            });
            
            // Add active class to selected button
            const selectedBtn = document.querySelector(`button[onclick="selectAmountRange('${range}')"]`);
            if (selectedBtn) {
                selectedBtn.classList.remove('border-gray-200', 'hover:bg-gray-50');
                selectedBtn.classList.add('bg-indigo-100', 'border-indigo-500', 'text-indigo-600');
            }
            
            // Set amount inputs based on selection
            const minAmount = document.getElementById('minAmount');
            const maxAmount = document.getElementById('maxAmount');
            
            switch(range) {
                case '0-100':
                    minAmount.value = '0';
                    maxAmount.value = '100';
                    break;
                case '100-500':
                    minAmount.value = '100';
                    maxAmount.value = '500';
                    break;
                case '500+':
                    minAmount.value = '500';
                    maxAmount.value = '';
                    break;
            }
        }
        
        // Reset all filters
        function resetFilters() {
            // Uncheck all checkboxes
            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = false;
            });
            
            // Clear date inputs
            document.getElementById('startDate').value = '';
            document.getElementById('endDate').value = '';
            
            // Clear amount inputs
            document.getElementById('minAmount').value = '';
            document.getElementById('maxAmount').value = '';
            
            // Remove active states from quick select buttons
            document.querySelectorAll('.time-range-btn, .amount-range-btn').forEach(btn => {
                btn.classList.remove('bg-indigo-100', 'border-indigo-500', 'text-indigo-600');
                btn.classList.add('border-gray-200', 'hover:bg-gray-50');
            });
            
            // Hide filter indicator
            document.getElementById('filter-indicator').classList.add('hidden');
        }
        
        // Apply filters
        function applyFilters() {
            const filters = collectFilterData();
            
            // Show loading state
            const applyBtn = document.querySelector('button[onclick="applyFilters()"]');
            const originalText = applyBtn.textContent;
            applyBtn.textContent = '应用中...';
            applyBtn.disabled = true;
            
            // Simulate filter application
            setTimeout(() => {
                // Check if any filters are applied
                const hasActiveFilters = checkActiveFilters();
                
                if (hasActiveFilters) {
                    // Show filter indicator
                    document.getElementById('filter-indicator').classList.remove('hidden');
                    alert(`筛选已应用！\\n\\n找到 ${Math.floor(Math.random() * 50) + 10} 条符合条件的订单。\\n\\n筛选条件已保存，您可以随时调整。`);
                } else {
                    // Hide filter indicator if no filters
                    document.getElementById('filter-indicator').classList.add('hidden');
                    alert('未设置任何筛选条件，显示全部订单。');
                }
                
                // Close modal
                hideFilterModal();
                
                // Reset button state
                applyBtn.textContent = originalText;
                applyBtn.disabled = false;
            }, 1000);
        }
        
        // Collect filter data
        function collectFilterData() {
            const filters = {};
            
            // Order status
            const statusCheckboxes = document.querySelectorAll('input[name="status"]:checked');
            if (statusCheckboxes.length > 0) {
                filters.status = Array.from(statusCheckboxes).map(cb => cb.value);
            }
            
            // Customer type
            const customerCheckboxes = document.querySelectorAll('input[name="customerType"]:checked');
            if (customerCheckboxes.length > 0) {
                filters.customerType = Array.from(customerCheckboxes).map(cb => cb.value);
            }
            
            // Payment method
            const paymentCheckboxes = document.querySelectorAll('input[name="payment"]:checked');
            if (paymentCheckboxes.length > 0) {
                filters.payment = Array.from(paymentCheckboxes).map(cb => cb.value);
            }
            
            // Delivery method
            const deliveryCheckboxes = document.querySelectorAll('input[name="delivery"]:checked');
            if (deliveryCheckboxes.length > 0) {
                filters.delivery = Array.from(deliveryCheckboxes).map(cb => cb.value);
            }
            
            // Date range
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            if (startDate || endDate) {
                filters.dateRange = { start: startDate, end: endDate };
            }
            
            // Amount range
            const minAmount = document.getElementById('minAmount').value;
            const maxAmount = document.getElementById('maxAmount').value;
            if (minAmount || maxAmount) {
                filters.amountRange = { min: minAmount, max: maxAmount };
            }
            
            return filters;
        }
        
        // Check if any filters are active
        function checkActiveFilters() {
            // Check checkboxes
            const checkboxes = document.querySelectorAll('#filterModal input[type="checkbox"]:checked');
            if (checkboxes.length > 0) return true;
            
            // Check date inputs
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            if (startDate || endDate) return true;
            
            // Check amount inputs
            const minAmount = document.getElementById('minAmount').value;
            const maxAmount = document.getElementById('maxAmount').value;
            if (minAmount || maxAmount) return true;
            
            return false;
        }

        // Initialize page - show pending orders tab by default or tab from URL hash
        document.addEventListener('DOMContentLoaded', function() {
            // Check if there's a hash in URL to determine which tab to show
            const hash = window.location.hash.substring(1); // Remove the # symbol
            let initialTab = 'pending'; // default tab
            
            // Map hash values to tab names
            const hashToTab = {
                'service': 'service',
                'pending': 'pending',
                'unpaid': 'unpaid',
                'shipped': 'shipped',
                'all': 'all'
            };
            
            if (hash && hashToTab[hash]) {
                initialTab = hashToTab[hash];
            }
            
            switchTab(initialTab);
            
            // Close modal when clicking outside
            document.getElementById('filterModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    hideFilterModal();
                }
            });
        });
    </script>
</body>
</html>